<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Friends Bookstore!</title>
<style type="text/css">
<!--
@import url(./css/global.css);
-->
</style>

<!--
  jQuery library
-->
<script type="text/javascript" src="./jQuery/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

var itemList = [
    {url: "./images/whatishtml5.jpg", title: "What is HTML5?", price: "$9.99"},
    {url: "./images/headfirst.jpg", title: "Head First ...", price: "$21.99"},
    {url: "./images/html4dum.jpg", title: "HTML For Dum...", price: "$24.34"},
    {url: "./images/samshtml.jpg", title: "Sams HTML ...", price: "$20.82"},
    {url: "./images/html4pub.jpg", title: "HTML5 for Publishers", price: "$9.99"},
    {url: "./images/learningxml.jpg", title: "Learning XML", price: "$26.36"},
    {url: "./images/beginningxml.jpg", title: "Beginning XML", price: "$28.39"},
    {url: "./images/professionalxml.jpg", title: "Professional XML", price: "$31.67"},
    {url: "./images/whatishtml5.jpg", title: "What is HTML5?", price: "$9.99"},
    {url: "./images/headfirst.jpg", title: "Head First ...", price: "$21.99"},
    {url: "./images/html4dum.jpg", title: "HTML For Dum...", price: "$24.34"},
    {url: "./images/samshtml.jpg", title: "Sams HTML ...", price: "$20.82"},
    {url: "./images/html4pub.jpg", title: "HTML5 for Publishers", price: "$9.99"},
    {url: "./images/learningxml.jpg", title: "Learning XML", price: "$26.36"},
    {url: "./images/beginningxml.jpg", title: "Beginning XML", price: "$28.39"},
    {url: "./images/professionalxml.jpg", title: "Professional XML", price: "$31.67"}
];

/**
 * Item html creation helper.
 */
function getItemHTML(item)
{
    return '<div class="thmbbx"><div class="thumbContainer"><div class="itemBox" style="border: 1px solid #808080; width: 150px; height: 150px; background-image: none; background-position: center center; background-repeat: no-repeat;"><img src="' + item.url + '" width="150" height="150" alt="' + item.url + '" /></div><div class="bestSellerCarouselTxt" title="' + item.title + '">'+ item.title +'</div><div class="bestSellerCarouselPrice">'+ item.price + '</div></div>';    
};

jQuery(document).ready(function() {    
    for (var i = 0; i <= itemList.length; i++) {        
        var itemHTML = getItemHTML(itemList[i]) 
        $('#galleryContainer').append(itemHTML);
    }
});


</script>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<div class="container">
  <header>
  	  <div id="header-logo" style="width=100%;height:125px;">
      	<div style="float:left">
      		<a href="#"><img src="./images/logo.jpg" alt="Friends Bookstore" width="125" height="125" id="Insert_logo" style="background: #FFFFFF; display:block;" /></a>
      	</div>
      	<div style="float:right; margin-right:20px; margin-top:61px;">
    		<h1 style="position:relative; color:#246B47">Welcome to Friends Bookstore!</h1>  
    	</div>
    </div> 
    <div id="header-search" style="margin-right:20px; padding-top:10px;width=100%;">  
		<div style="position:relative:width:100%">        
        </div>    
    	<div id="simplesearch" style="padding:5px;width:100%;">        
            <form action="#">
	            <div align="right" style="padding:2px; float:right;">
                    <input id = "search-submit" type="submit" value="Search" style="background-color:#85C2A3;width:100px;height:35px;font-weight:bold;color:#FFF"/>								
                </div>
				<div align="right" style="padding:2px; float:right;">
                    <input id = "search-text" name="holder" placeholder="Search Books" style="width:300px;height:30px;font-size:14px;" />
                </div>                                               
                <div align="right" style="padding:2px; float:right;">
                    <select name="search-by" id="search-by" style="background-color:#85C2A3;width:150px;height:35px;font-size:14px;color:#FFF">
                        <option>Keyword</option>
                        <option>Title</option>
                        <option>Author</option>
                        <option>ISBN</option>
                    </select>
                </div>               
            </form>   
    	</div>  	    
    </div> 
  </header>
  <aside>
  <nav>
  <div class="search-filter">   
	<div class="wrapper"> 
  	<ul class="filter-set">
    	<li class="filter-value">
            <div class="filter-name">Books by Subject</div>
            <div class="filter-hider">
                <ul class="filter-value-set">
                    <li class="filter-value"><span class="filter-value-a"><a href="">Featured</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">Art, Architecture &amp; Photography</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">Biographies</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">Business &amp; Money</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">Children's Books</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">Computing &amp; Internet</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">Cookbooks, Food &amp; Wine</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">Fiction &amp; Literature</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">History</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">Humor</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">Mystery &amp; Crime</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">Nonfiction</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">Romance</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">Sports &amp; Adventure</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="">Self-Improvement</a></span></li>                    
                </ul>
            </div>
        </li>
		<li class="filter-value">
  			<div class="filter-name">Price Range</div>
  			<div class="filter-hider">
  				<ul class="filter-value-set">
    				<li class="filter-value"><span class="filter-value-a"><a href="">Under $10</a></span></li>
    				<li class="filter-value"><span class="filter-value-a"><a href="">$10 - $25</a></span></li>    				
    				<li class="filter-value"><span class="filter-value-a"><a href="">$25 - $50</a></span></li>    				    							
                    <li class="filter-value"><span class="filter-value-a"><a href="">Over $50</a></span></li>    			                    
    			</ul>
  			</div>
    	</li>
        <li class="filter-value">
  			<div class="filter-name">Formats</div>
  			<div class="filter-hider">
  				<ul class="filter-value-set">
    				<li class="filter-value"><span class="filter-value-a"><a href="">Paperback</a></span></li>
    				<li class="filter-value"><span class="filter-value-a"><a href="">Hardbound</a></span></li>    				
    				<li class="filter-value"><span class="filter-value-a"><a href="">ebook</a></span></li>    				    							
                    <li class="filter-value"><span class="filter-value-a"><a href="">Audio</a></span></li>    			                    
                    <li class="filter-value"><span class="filter-value-a"><a href="">Video</a></span></li>  
    			</ul>
  			</div>
    	</li>
         <li class="filter-value">
  			<div class="filter-name">Language</div>
  			<div class="filter-hider">
  				<ul class="filter-value-set">
    				<li class="filter-value"><span class="filter-value-a"><a href="">English</a></span></li>
    				<li class="filter-value"><span class="filter-value-a"><a href="">French</a></span></li>    				
    				<li class="filter-value"><span class="filter-value-a"><a href="">German</a></span></li>    				    							
                    <li class="filter-value"><span class="filter-value-a"><a href="">Spanish</a></span></li>    			                    
                    <li class="filter-value"><span class="filter-value-a"><a href="">Italian</a></span></li>  
                    <li class="filter-value"><span class="filter-value-a"><a href="">Russian</a></span></li>  
                    <li class="filter-value"><span class="filter-value-a"><a href="">Chinese</a></span></li>                      
                    <li class="filter-value"><span class="filter-value-a"><a href="">Japanese</a></span></li>  
                    <li class="filter-value"><span class="filter-value-a"><a href="">Hindi</a></span></li>                                       
    			</ul>
  			</div>
    	</li>
  	</ul>
    </div>
  </div>
  </nav>
  </aside>
  <article class="content">
  	<div id="maincontent" align="center" style="position:relative; width:100%;">
	    <div style="padding-top:20px; width:100%;height:40px;">
        	<div style="position:relative; width:5%;">                            
            </div>
            <div align="left" style="position:relative; width:90%;">
            	<h2 style="position:relative; color:#246B47">Your search returned 12 Books!</h2>  
        	</div>
            <div style="position:relative; width:5%;">                            
            </div>
        </div>
		<div style="padding-top:20px; width:100%;">
        	<div style="position:relative; width:5%;">                            
            </div>
           <div id="galleryContainer" class="galmin">
                
        	</div> 
            <div style="position:relative; width:5%;">                            
            </div>
        </div>                   	
    </div>        
  </article>
  <footer>    
    <address style="text-align:right; padding-right:10px;font:11px Arial, Helvetica, sans-serif">
      &copy; 2012 Friends Bookstore, Inc. All Rights Reserved
    </address>
  </footer>
  <!-- end .container -->
  </div>
</body>
</html>
